<template>
  <PageMain>
    <template #header></template>
    <template #body>
      <div class="w-full h-auto pl-6 pr-6">
        <div class="w-full h-auto">
          <div class="head">
            <a-row class="grid-demo" justify="space-between">
              <a-col :span="7">
                <div class="w-full h-full flex">
                  <div style="overflow: hidden">
                    <img src="@/assets/images/nav1.png" alt="" class="img" />
                  </div>
                  <div class="w-full ml-3" style="display: flex; flex-direction: column">
                    <p class="h-1/2 flex justify-start items-center">企业数据资产</p>
                    <p class="h-1/2">
                      <span class="title">{{ titleData.total ? titleData.total : '-' }}</span>
                      <span class="text">个</span>
                    </p>
                  </div>
                </div>
              </a-col>
              <a-col :span="9">
                <div class="w-full h-full flex">
                  <div><img src="@/assets/images/nav2.png" alt="" class="img" /></div>
                  <div class="w-full ml-3">
                    <p class="h-1/2 flex justify-start items-center">累计入表金额</p>
                    <p class="h-1/2">
                      <span class="title">{{
                        titleData.registration_rate ? titleData.registration_rate : '-'
                      }}</span>
                      <span style="margin-left: 4px; font-size: 12px">万元</span>
                    </p>
                  </div>
                </div>
              </a-col>
              <a-col :span="7">
                <div class="w-full h-full flex">
                  <div><img src="@/assets/images/nav3.png" alt="" class="img" /></div>
                  <div class="w-full ml-3">
                    <p class="h-1/2 flex justify-start items-center">本月完成入表金额</p>
                    <p class="h-1/2">
                      <span class="title">{{titleData.call_number ? titleData.call_number : '-'}}</span>
                      <!-- <span class="title">-</span> -->
                      <!-- <span style="margin-left: 4px; font-size: 12px">万次</span> -->
                      <!-- <span class="title">/</span> -->
                      <!-- <span class="title">{{ titleData.trad_number ? titleData.trad_number : '-'}}</span> -->
                      <!-- <span class="title">-</span> -->
                      <span style="margin-left: 4px; font-size: 12px">元</span>
                    </p>
                  </div>
                </div>
              </a-col>
            </a-row>
          </div>
          <div class="flex seach w-full h-[30px] mt-6">
            <div class="flex justify-between items-center w-full">
              <div class="w-full h-[32px]" style="border-radius: 5px">
                <a-row>
                  <a-col :span="8">
                    <a-space>
                      <div class="w-[328px] h-full">
                        <div class="w-full">
                          <a-input-search
                            v-model="AssetList.key"
                            @search="handleSearch"
                            allow-clear
                            placeholder="请输入资产名称搜索"
                            @keyup.enter="getList"
                            ref="inputSearch"
                            @focus="handleFocus"
                            @clear="getList"
                            @blur="handleBlur"
                            :class="flag ? 'focused ' : ''"
                          />
                        </div>
                      </div>
                      <div class="w-[300px] h-[32px] ml-6">
                        <div class="flex justify-around items-center h-full tab">
                          <div
                            class="w-[50px] flex items-center justify-center h-full flex-1 text-center rounded cursor-pointer"
                            v-for="item in tabData"
                            :key="item"
                            @click="tabHandleClick(item)"
                            :style="{
                              color: AssetList.registration_status === item ? '#1459FA' : '#465A80',
                              background: AssetList.registration_status === item ? '#fff' : '',
                              width:'50px'
                            }"
                          >
                            {{ item }}
                          </div>
                        </div>
                      </div>
                    </a-space>
                  </a-col>
                  <a-col :span="14"></a-col>
                  <a-col :span="2" class="flex justify-end">
                    <a-button type="primary" style="border-radius: 4px" @click="handleAdd"
                      >资产打包</a-button
                    >
                  </a-col>
                </a-row>
              </div>
            </div>
          </div>
          <div class="w-full overflow-hidden mt-6" :style="{ height: 'calc(100vh - 350px)' }">
            <a-table
              :columns="columns"
              :scroll="{ minWidth: '120%', y: '100%' }"
              :data="tableData"
              :pagination="false"
            >
              <template #Splicing="{ record }">
                <span class="table-title"> {{ record.name }}</span>
                <br />
                <span class="table-title">{{ record.describe }}</span>
              </template>
              <template #version="{ record }">
                <span>V{{ record.version }}.0</span>
              </template>
              <template #status="{ record }">
                <span
                  v-if="record.registration_status == '已登记'"
                  class="flex justify-start items-center"
                >
                  <div class="circle-point border-[#34C94F]"></div>
                  已登记
                </span>
                <span
                  v-if="record.registration_status == '未登记'"
                  class="flex justify-start items-center"
                >
                  <div class="circle-point border-[#FF4C38]"></div>
                  未登记
                </span>
              </template>
              <template #handle="{ record }">
                <a-space size="small" style="display: flex; justify-content: space-around">
                  <span
                    style="color: #165dff"
                    class="cursor-pointer"
                    @click="handleClick(record, '编辑')"
                    >编辑</span
                  >
                  <span
                    style="color: #165dff"
                    class="cursor-pointer"
                    @click="handleClick(record, '查看')"
                    >查看</span
                  >
                  <span
                    style="color: #165dff"
                    class="cursor-pointer"
                    @click="handleClick(record, '查看关联')"
                    >查看关联</span
                  >
                  
                 
                  <a-dropdown trigger="hover" position="bottom">
                <a-link type="primary">更多...</a-link>
                <template #content>
                  <a-doption
                     
                  > <span
                    style="color: #165dff"
                    class="cursor-pointer"
                    @click="handleClick(record, '更新')"
                    >更新</span
                  ></a-doption>
                  <a-doption
                     
                  > <span
                    style="color: #165dff"
                    class="cursor-pointer"
                    @click="handleClick(record, '历史版本')"
                    >历史版本</span
                  ></a-doption>
                </template>
              </a-dropdown>
                </a-space>
              </template>
            </a-table>
          </div>
        </div>
        <div class="page-box w-full h-[40px] overflow-hidden flex justify-end items-center">
          <a-pagination
            :total="AssetList.total"
            show-total
            show-page-size
            show-jumper
            @page-size-change="handleSizeChange"
            @change="handleCurrentChange"
          />
        </div>
      </div>
    </template>
  </PageMain>
</template>

<script lang="ts" setup>
import { useRouter } from 'vue-router';
import { onMounted, ref } from 'vue';
import PageMain from '@/components/PageBox.vue';
const router = useRouter();
/**
 * @method  table切换
 */
const tabData = ['全部', '入表前', '入表中','入表后'];
const tabHandleClick = (val: string) => {
  AssetList.value.registration_status = val;
  getList();
};
/**
 * @method 表格数据
 */
import usetable from './use_hooks/usetable';
const {
  columns,
  getTitle,
  titleData,
  AssetList,
  tableData,
  getList,
  handleSearch,
  handleSizeChange,
  handleCurrentChange
} = usetable();
/**
 * @method 表格操作
 */
const handleClick = (record, action: string) => {
  switch (action) {
    case '编辑':
      router.push({ name: 'packedit', query: { id: record.id, action: '资源编辑' } });
      break;
    case '查看':
      router.push({ name: 'packcheck', query: { id: record.id, action: '查看详情' } });
      break;
    case '查看关联':
      router.push({ name: 'bloodtiesdetail', query: { ...record } });
      break;
    case '更新':
      router.push({ name: 'packupdate', query: { id: record.id, action: '资产更新' } });
      break;
    case '历史版本':
      router.push({ name: 'historyversion', query: { ...record,action: '历史版本' } });
      break;
    default:
      console.log('未知操作');
  }
};
/**
 * @method 资产打包
 */
const handleAdd = () => {
  router.push({ name: 'packhandle', query: { action: '资产打包' } });
};
onMounted(() => {
  getList(); //获取资产打包列表
  getTitle(); //获取主页标题数据
});
/**
 * @method 搜索框聚焦失焦
 */
const flag = ref(false);
const handleFocus = () => {
  flag.value = true;
};
const handleBlur = () => {
  flag.value = false;
};
</script>

<style lang="less" scoped>
.circle-point {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border-width: 2px;
}
.title-text {
  height: 32px;
  opacity: 1;
  font-family: Microsoft YaHei;
  font-size: 20px;
  font-weight: bold;
  line-height: 32px;
  letter-spacing: 0em;
  color: #394d73;
}
.head {
  .grid-demo .arco-col {
    height: 96px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 20px 0 20px 20px;
    border-radius: 8px;
    opacity: 1;
    background: #ffffff;
    border: 1px solid #ebf0fa;
    .img {
      width: 54px;
      height: 48px;
      background-repeat: no-repeat;
      background-size: 100% 100%;
    }
  }
  .title {
    font-size: 24px;
    font-weight: 700;
    color: #465a80;
  }
  .text {
    margin-left: 4px;
    font-size: 12px;
  }
}

.seach {
  :deep(.arco-input-wrapper) {
    background-color: #ffffff;
    border-radius: 5px;
    border: 1px solid #d3dbeb;
  }
  .title {
    /* 自动布局子元素 */

    opacity: 1;
    /* 16px-标题-加粗(font-size-title-1) */
    font-family: Microsoft YaHei;
    font-size: 16px;
    font-weight: bold;
    line-height: 24px;
    letter-spacing: 0em;
    /* 2 中性色/标题&强调(color-text-1) */
    color: #394d73;
    z-index: 3;
  }

  .tab {
    width: 253px;
    border-radius: 4px;
    opacity: 1;
    flex-direction: row;
    padding: 3px;
    background-color: #f0f4fa;
  }
}
.focused {
  border: 1px solid #165dff !important;
}

:deep(.arco-table-tr) {
  height: 48px;
}
// table样式
.table-title {
  font-family: Microsoft YaHei;
  font-size: 14px;
  font-weight: normal;
  color: #465a80;
}
:deep(.arco-auto-tooltip-content) {
  font-family: Microsoft YaHei;
  font-size: 14px;
  font-weight: normal;
  color: #465a80;
}
</style>
